<template>
  <el-container>
    <div id="main">
      <div id="father">
        <div id="left">
          <div id="topBorder">
            <h3>个人基本信息</h3>
          </div>
          <!-- <h2 id="jobs">从业方向：</h2> -->
          <div id="basic">
            <h3 style="margin-left: 50px" id="jobAge">
              工作年限：{{ person.year }}年 {{ person.month }}月
            </h3>
            <h3 style="margin-left: 50px" id="hobby">
              联系方式：{{ person.mobile }}
            </h3>
            <h3 style="margin-left: 50px" id="ability">资质认证：</h3>
            <el-rate
              v-model="value"
              disabled
              id="rate"
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
            <h3 v-if="person.status == 1" style="margin-left: 50px" id="status">
              当前就业状态：<em style="color: green">在职</em>
            </h3>
            <h3 v-else style="margin-left: 50px" id="status">
              当前就业状态：<em style="color: red">待就业</em>
            </h3>
            <h3 id="education" style="margin-left: 50px">
              最高学历：{{ person.education }}
            </h3>
            <h3 style="margin-left: 50px" id="punishment">
              重大违纪违规处分：<em
                v-if="punishment.length > 0"
                style="color: red"
                >有</em
              >
              <em style="color: green" v-else>无</em>
            </h3>
          </div>
          <div id="border">
            <h3 style="margin: 0">综合能力图</h3>
          </div>
          <div id="myChart"></div>
        </div>
        <div id="test">
          <h2 id="msg" :class="{ t2: active }" class="t1">{{ person.name }}</h2>
          <a href="#" @mouseover="show()" @mouseleave="show()"></a>
        </div>
        <div id="exprience">
          <h1 style="text-align: center">
            工作经验&nbsp;&nbsp;<em style="font-size: 26px"
              ><i>exprience</i></em
            >
          </h1>

          <div id="grad"></div>
          <div id="steps">
            <el-timeline id="timeLine">
              <el-timeline-item
                color="0bbd87"
                :timestamp="obj.entryDate"
                placement="top"
                v-for="(obj, index) in list"
                :key="index"
              >
                <el-card id="card">
                  <h4>在职时间：</h4>
                  <span>{{ obj.entryDate }} ~ {{ obj.leaveDate }} </span>
                  <h4>所在公司：</h4>
                  <span>{{ obj.companyName }}</span>
                  <h4>所处职位：</h4>
                  <span>
                    {{ obj.deptName }}&nbsp;&nbsp;
                    <em v-if="obj.userType == 0">普通员工</em
                    ><em v-else-if="obj.userType == 3">HR</em
                    ><em v-else>部门经理</em>
                  </span>

                  <h4 id="punishmentmsg">
                    处分状况：<em v-if="obj.punishment.length == 0">无</em>
                  </h4>
                  <el-link
                  @click="dialogTableVisible = true"
                    id="showpunishment"
                    v-if="obj.punishment.length != 0"
                    type="primary"
                    >查看详情</el-link
                  >
                  <h4 id="evaluate">公司评价：</h4>
                  <span id="evaluatemsg">{{ obj.evaluate[0].evaluate }}</span>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div id="grad1"></div>
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          content="输出PDF"
          placement="left"
        >
          <el-button
            icon="el-icon-printer"
            type="primary"
            class="printer"
            :class="{ printerActive: print }"
            @click="showPrinter()"
            @mouseout="print()"
            circle
          ></el-button>
        </el-tooltip>
        <el-dialog title="处分情况" center  :visible.sync="dialogTableVisible">
          <el-table :data="punishment" fit >
            <el-table-column
              prop="createTime"
              label="处分日期"
              width="150"
            ></el-table-column>
             <el-table-column
              prop="punishmentLeve"
              label="处分等级"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="reasons"
              label="处分原因"
              width="300"
            ></el-table-column>
             <el-table-column
              prop="deptName"
              label="所在部门"
              width="200"
            ></el-table-column>
          </el-table> 
        </el-dialog>
      </div>
    </div>
  </el-container>
</template>
<script>
import * as echarts from "echarts";
import myChart from "@/js/myCharts";
import api from "@/api/background";
export default {
  name: "Oneself",
  data() {
    return {
      dialogTableVisible: false,
      value: 0, //推荐指数
      print: false,
      list: [], //所有工作信息
      punishment: [], //所有处分信息
      url:
        "~@/assets/images/userImage.png",
      person: {
        name: "",
        identityCard: "",
      },
      option: {
        //标题
        title: {
          text: "能力图",
          left: "center",
          top: "center",
        },
        tooltip: {},
        legend: {
          data: ["能力值"],
          bottom: 0,
        },
        radar: {
          name: {
            textStyle: {
              color: "black", //字体颜色
              // backgroundColor:'yellow',//维度的背景颜色
              borderRadius: 3, //弯曲度
              padding: [2, 4],
            },
          },
           toolbox: {
          feature: {
            saveAsImage: {
              namea: "保存考勤信息",
            },
          },
        },
          //维度
          indicator: [
            { name: "工作能力", max: 100 },
            { name: "工作态度", max: 100 },
            { name: "沟通能力", max: 100 },
            { name: "忠诚度", max: 100 },
            { name: "生活态度", max: 100 },
          ],
        },
        series: [
          {
            name: "个人能力图",
            type: "radar",
            areaStyle: { normal: {} },
            //数据
            data: [{ name: "能力值", value: [] }],
            itemStyle: {
              normal: {
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      active: false,
    };
  },
  watch: {
    print(val) {
      console.log(val);
    },
  },
  created() {
    this.person = this.$route.query.person;
    api
      .investigation(this.person)
      .then((response) => {
        this.list = response.list;
        this.person.name = this.list[this.list.length - 1].name;
        this.person.gender = this.list[this.list.length - 1].gender;
        this.person.age = this.list[this.list.length - 1].age;
        this.person.mobile = this.list[this.list.length - 1].mobile;
        this.person.education = this.list[this.list.length - 1].education;
        this.person.identityCard = this.list[this.list.length - 1].identityCard;
        this.person.status = this.list[this.list.length - 1].status;
        let year = 0,
          month = 0;
        //工作年限计算
        for (let index = 0; index < this.list.length; index++) {
          const element = this.list[index];

          month += element.month;
          year += element.year;
        }
        if (month >= 12) {
          year++;
          month -= 12;
        }
        this.person.year = year;
        this.person.month = month;
        //计算能力平均数
        let workingAbility = 0,
          workingAttitude = 0,
          communication = 0,
          loyal = 0,
          lifeAttitude = 0;
        for (let index = 0; index < this.list.length; index++) {
          const element = this.list[index];
          workingAbility += element.workingAbility;
          workingAttitude += element.workingAttitude;
          communication += element.communication;
          loyal += element.loyal;
          lifeAttitude += element.lifeAttitude;
        }
        this.option.series[0].data[0].value = [];
        this.option.series[0].data[0].value.push(
          workingAbility / this.list.length
        );
        this.option.series[0].data[0].value.push(
          workingAttitude / this.list.length
        );
        this.option.series[0].data[0].value.push(
          communication / this.list.length
        );
        this.option.series[0].data[0].value.push(loyal / this.list.length);
        this.option.series[0].data[0].value.push(
          lifeAttitude / this.list.length
        );
        this.drawLine();
        console.log(this.list )
        //生成评价指数
        workingAttitude = 0;
        workingAbility = 0;
        communication = 0;
        let len=0
        for (let index = 0; index < this.list.length; index++) {
          const element = this.list[index];
          for (let index2 = 0; index2 < element.evaluate.length; index2++) {
            const element2 = element.evaluate[index2]; 
            workingAbility += element2.workingAbility;
            len++
            workingAttitude += element2.workingAttitude;
            communication += element2.communication;
        }
          if (element.punishment.length > 0) {
            this.punishment= element.punishment;
          }
         
        }
         workingAttitude /= len
          workingAbility /= len
          communication /= len
        let sum = workingAbility + workingAttitude + communication;
         console.log(workingAbility)
          console.log(workingAttitude)
           console.log(communication)
        this.value = Math.floor(sum / 60 );
        console.log('punishment',this.punishment);
      })
      .catch((err) => {
        this.$message.error(err);
      });
    if (this.person == {}) {
      this.$message.error("未获取到数据，返回到主页");
      setTimeout(() => {
        this.$router.push({ path: "/background" });
      }, 300);
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      //初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("myChart"),
        "macarons"
      );

      //使用制定的配置项和数据显示图表
      myChart.setOption(this.option);
    },
    show() {
      this.active = !this.active;
    },
    showPrinter() {
      this.print = !this.print;
      let that = this;
      if (this.print) {
        this.$confirm("是否将个人信息转化为PDF？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            that.getPdf("#myChart", this.list[0].name+"的综合能力图");
          })
          .catch(() => {
            this.$message({
              message:"已取消输出",
              type: "info",
            });
          });
      }
    },
  },
};
</script>
<style>
#main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50px;
}
#personImage {
  margin-left: 150px;
  margin-top: 100px;
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 50% 50%;
}
#personImage:hover {
  background-color: slategray;
}
#prove {
  position: absolute;
  left: 550px;
  top: 220px;
}
#age::before {
  content: url("~@/assets/images/age.png");
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-right: 20px;
  position: relative;
  top: 3px;
}
#myChart {
  width: 450px;
  height: 400px;
  position: absolute;
  top: 620px;
  left: -10px;
  margin: 0;
}
#information {
  width: 261px;
  height: 400px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 88px;
  top: 550px;
  padding-left: 20px;
}
#left {
  width: 25%;
  height: 1050px;
  position: absolute;
  left: 80px;
  top: 80px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#test {
  width: 150px;
  height: 150px;
  border-radius: 50% 50%;
  position: absolute;
  left: 225px;
  top: 150px;
  background-image: url("~@/assets/images/userImage.png");
  background-position: top;
  background-size: cover;
}
#service {
  position: absolute;
  left: 450px;
  top: 190px;
}
#showpunishment {
  position: absolute;
  left: 550px;
  top: 77px;
}
#test a {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: all 0.3s;
  overflow: hidden;
}
.t1 {
  color: rgba(0, 0, 0, 0);
  text-align: center;
  line-height: 100px;
  transition: all 0.3s;
}
.t2 {
  text-align: center;
  line-height: 100px;
  transition: all 0.3s;
  color: black;
}
#test a:hover {
  background-color: rgba(128, 128, 128, 0.3);
  border-radius: 50% 50%;
  position: absolute;
  top: 0;
  overflow: hidden;
  left: 0;
}
#basic {
  position: absolute;
  top: 220px;
  left: 20px;
  width: 100%;
}
#punishmentmsg {
  position: absolute;
  left: 450px;
  top: 48px;
}
#evaluate {
  position: absolute;
  left: 450px;
  top: 100px;
}
#basic h3 {
  margin: 0;
  padding: 0;
}
#jobs {
  line-height: 100px;
  position: absolute;
  top: 200px;
  left: 200px;
}
#father {
  width: 100%;
  height: 100%;
}
#jobAge,
#hobby,
#ability,
#education,
#punishment,
#status {
  cursor: pointer;
}
#jobAge::before,
#hobby::before,
#ability::before,
#education::before,
#punishment::before,
#status::before {
  content: "";
  display: block;
  width: 10px;
  height: 25px;
  background-color: skyblue;
  position: relative;
  top: 25px;
  right: 15px;
}
#border {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 550px;
  background-color: rgb(221, 221, 221);
  text-align: center;
  line-height: 40px;
  color: black;
  padding-top: 0;
}
#topBorder {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  padding: 0;
  color: black;
  line-height: 40px;
  text-align: center;
  background-color: rgb(221, 221, 221);
}
#topBorder h3 {
  margin: 0;
}
#rate {
  position: absolute;
  left: 150px;
  top: 120px;
}
#exprience {
  width: 66%;
  height: 1050px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 32%;
  top: 80px;
  padding-top: 40px;
}
#grad,
#grad1 {
  height: 2px;
  background-image: linear-gradient(to right, green, yellow);
}
#grad1 {
  position: absolute;
  top: 150px;
}
#steps {
  height: 80%;
  position: absolute;
  top: 200px;
  left: 100px;
}
.printer {
  width: 80px;
  height: 80px;
  position: absolute;
  left: -50px;
  font-size: 40px;
  bottom: 20px;
  transition: all 0.5s;
}
.printerActive {
  position: absolute;
  left: 20px;
}
#card {
  width: 900px;
  padding-left: 50px;
}
#card h4 {
  font-size: 20px;
}
#card span {
  font-size: 18px;
}
#evaluatemsg {
  position: absolute;
  left: 450px;
  top: 170px;
}
</style>